<template>
	<div class="div1">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>咨询预约管理</el-breadcrumb-item>	
			</el-breadcrumb>
		</div>
	<div class="container">
		<!-- 搜索区域 -->
		<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
			<el-form-item label="预约用户"  size="large">
				<el-input  v-model="queryInfo.username" placeholder="请输入用户名"></el-input>
			</el-form-item>
			<el-form-item label="咨询师" size="large">
				<el-input v-model="queryInfo.counselorName" placeholder="请输入咨询师"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="large">搜索</el-button>
				<el-button type="danger" size="large">批量删除</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格区域 -->
		<el-table :data="dataList" border style="width: 100%" row-key="id" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="ID" width="85"></el-table-column>
			<el-table-column prop="counselorName" label="预约时间"></el-table-column>
			<el-table-column prop="counselorLevel.counselorLevelName" label="情况说明"></el-table-column>
			<el-table-column prop="counselorPhone" label="预约用户"></el-table-column>
			<el-table-column prop="counselorEmail" label="咨询师"></el-table-column>
			<el-table-column label="操作" width="200">
				<template #default="scope">
					<el-button type="primary">编辑</el-button>
					<el-button type="danger">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页区域 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		onMounted,
		reactive,
		ref
	} from 'vue';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';
	// 查询信息对象
	const queryInfo = reactive({
		username: '',
		counselorName: '',
		pageNum: 1,
		pageSize: 10
	})
	// 总数量
	const total = ref(0)
	// 数据列表
	const dataList = ref([])
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;
	// 获取列表数据
	const queryDataList = () => {
		axios.get(
		`consultation/page?pageNum=${queryInfo.pageNum}&pageSize=${queryInfo.pageSize}&username=${queryInfo.username}&counselorName=${queryInfo.counselorName}`
		).then(resp => {
			if (resp.code == 200) {
				dataList.value = resp.data.list;
				total.value = resp.data.total;
			} else {
				ElMessage.error('查询失败')
			}
		})
	}
	// // 页面挂载完毕，立刻请求数据
	onMounted(() => {
		queryDataList()
	})
	const multipleSelection = ref([])
	const handleSelectionChange = (val) => {
		console.log(val);
		multipleSelection.value = val
	}
	const handleSizeChange = (size) => {
		queryInfo.pageSize = size
		queryDataList()
	}
	const handleCurrentChange = (num) => {
		queryInfo.pageNum = num
		queryDataList()
	}
</script>

<style scoped>
.div1 {
			border-bottom: 1px solid #eeeeee;
			width: 100%;
			height: 30px;
			padding-top: 10px;
		}
		.container {
				margin: 10px 10px;
				color: #696a6e;
			}
		
</style>